<template>
  <el-descriptions border :column="3">
    <el-descriptions-item width="15%" v-for="item in desData" :key="item.label" :label="item.label">
      <span v-if="item.key=='projectType'">{{ formatType(item.text) }}</span>
      <span v-else-if="item.key=='terminal'">{{ formatTerminal(item.text) }}</span>
      <span v-else-if="item.key=='fundResource'">{{ formatResource(item.text) }}</span>
      <span v-else-if="item.key=='countyLeadDept'">{{ formatLeaDept(item.text) }}</span>
      <span v-else-if="item.key=='domain'">{{ formartDomain(item.text) }}</span>
      <span v-else>{{ item.text }}</span>
    </el-descriptions-item>
  </el-descriptions>
</template>

<script lang="ts">
import {defineComponent} from 'vue'
import { useDict,useTreeDict } from '/@/hooks/dict';

export default defineComponent({
  name: "DetailDescription",
  props: {
    desData: {
      type: Array,
      default: () => []
    }
  },
  setup(){
    const {
			country_lead_dept:COUNTY_LEAD_DEPT,
			belong_domain:APP_DOMAIN,
			fund_resource:FUND_RESOURCE,
			app_project_type:PROJECTTYPE
		} = useDict(
			'country_lead_dept',
			'belong_domain',
			'fund_resource',
			'app_project_type'
		)
		const { terminal_area } = useTreeDict('terminal_area');

    function formatType(val){
			const rowArr = PROJECTTYPE.value.filter((item) => item.value == val);
			return rowArr.length && rowArr[0].label;
    }
    function formatTerminal(type){
      let arr = []
      type&&type.split(',').forEach(item=>{
        arr.push(findLabel(terminal_area.value,item))
      })
      return arr.join(',')
    }
    
    function findLabel(data,val){
      let label = '';
      data.forEach(item=>{
        if(item.value == val){
          label = item.label
        }
        if(!label&&item.children&&item.children.length>0){
          label = findLabel(item.children,val)
        }
      })
      return label
    }
    function formatResource(type){
      const data = type.split(',')
      let _data = []
      data.forEach(item=>{
			const rowArr = FUND_RESOURCE.value.filter((i) => i.value == item);
        if(rowArr.length){
          _data.push(rowArr[0].label)
        }
      })
      return _data.join(',')
    }
    function formatLeaDept(val){
			const rowArr = COUNTY_LEAD_DEPT.value.filter((item) => item.value == val);
			return rowArr.length && rowArr[0].label;
    }
    function formartDomain(val){
			const rowArr = APP_DOMAIN.value.filter((item) => item.value == val);
			return rowArr.length && rowArr[0].label;
    }
    
    return {
      formatType,
      formatTerminal,
      formatResource,
      formatLeaDept,
      formartDomain
    }
  }
})
</script>

<style scoped lang="scss">
:deep(.el-descriptions__label) {
	width: 15% !important;
}
</style>